<template>
  <el-aside :class="{whitebgc:isShow}" class="my-sider" width="300px">
    <CardInfo class="card card-info" />
    <CardTag :hotTags="hotTags" class="card card-tag" />
    <CardArticle :hotArticles="hotArticles" class="card card-article" />
    <CardArchive :archiveList="archiveList" class="card card-archive" />
    <CardCategory :newArticles="newArticles" class="card card-category" />
  </el-aside>
</template>

<script>
import CardInfo from '../components/card/CardInfo'
import CardTag from '../components/card/CardTag'
import CardArticle from '../components/card/CardArticle'
import CardArchive from '../components/card/CardArchive'
import CardCategory from '../components/card/CardCategory'

import { getHotArticles, getNewArticles } from '@/api/article'
import { getHotTags } from '@/api/tag'
import { getArchiveList } from '@/api/archive'
export default {
  data () {
    return {
      hotTags: [],
      hotArticles: [],
      newArticles: [],
      archiveList: []
    }
  },
  components: {
    CardInfo,
    CardTag,
    CardArticle,
    CardArchive,
    CardCategory
  },
  created () {
    this.getHotTags()
    this.getHotArticles()
    this.getNewArticles()
    this.getArchiveList()
  },
  computed: {
    isShow () {
      if (this.$route.path.includes('/article/byId')) {
        return true
      } else return false
    }
  },
  methods: {
    getHotTags () {
      getHotTags().then(data => {
        this.hotTags = data.data
      }).catch(error => {
        if (error !== 'error') {
          this.$message({ type: 'error', message: '最热标签加载失败！', showClose: true })
        }
      })
    },
    getHotArticles () {
      getHotArticles().then(data => {
        this.hotArticles = data.data
      }).catch(error => {
        if (error !== 'error') {
          this.$message({ type: 'error', message: '最热文章加载失败!', showClose: true })
        }
      })
    },
    getNewArticles () {
      getNewArticles().then(data => {
        this.newArticles = data.data
      }).catch(error => {
        if (error !== 'error') {
          this.$message({ type: 'error', message: '最新文章加载失败!', showClose: true })
        }
      })
    },
    getArchiveList () {
      getArchiveList().then(data => {
        this.archiveList = data.data
      }).catch(error => {
        if (error !== 'error') {
          this.$message({ type: 'error', message: '文章归档列表加载失败！', showClose: true })
        } else {

        }
      })
    }
  }
}
</script>

<style>
.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}
.my-sider {
  background: #f5f5f5;
}
.card {
  line-height: 40px;
}
.card:not(:first-child) {
  margin-top: 20px;
}
.whitebgc {
  background-color: #fff;
}
</style>
